import { FormControlRender } from "@alipay/tech-ui";
import type { ActionRefType } from "@alipay/techui-rule-tree";
import { RuleTree } from "@alipay/techui-rule-tree";
import { Button, Form, Input } from "antd";
import type { FormInstance } from "antd/lib";
import { useRef } from "react";
import styled from "styled-components";
import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";

const WrapperNode = styled.div<{
  $fold: boolean;
}>`
  > .rule-tree-relation::after {
    border-color: ${({ $fold }) => ($fold ? "#eee" : "transparent")};
  }
`;

function App() {
  const actionRef = useRef<ActionRefType<any>>(null!);
  const formRef = useRef<FormInstance>(null!);
  return (
    <div>
      <p>
        这个案例是使用nodeRender等API定制dom，在原来的功能上添加一个折叠/展开的功能
      </p>
      <RuleTree<{ name: string; age: number }>
        actionRef={actionRef}
        onChange={console.log}
        formRef={formRef}
        defaultValue={{
          relation: "and",
          fold: true,
          children: [
            { name: "A" },
            { name: "B" },
            { name: "C" },
            {
              relation: "or",
              children: [{ name: "D" }, { name: "DD" }, { name: "DDD" }],
            },
            { name: "E" },
          ],
        }}
        nodeRender={({ listDom, relationDom }, fields) => {
          const data =
            formRef.current?.getFieldValue(
              RuleTree.toBasePath(fields.levelPath)
            ) || {};
          return (
            <WrapperNode
              $fold={data.fold}
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              {relationDom}
              <div style={{ display: data.fold !== false ? "block" : "none" }}>
                {listDom}
              </div>
            </WrapperNode>
          );
        }}
        relationFormItemRender={(dom, fields) => {
          return (
            <>
              {dom}
              <Form.Item
                noStyle
                initialValue
                name={fields.levelPath.length ? [fields.index, "fold"] : "fold"}
              >
                <FormControlRender>
                  {(itemProps) => {
                    return (
                      <Button
                        type="text"
                        style={{ transform: "translateY(3px)" }}
                        onClick={() => {
                          itemProps.onChange?.(!itemProps.value);
                        }}
                        icon={
                          itemProps.value ? (
                            <MinusCircleOutlined />
                          ) : (
                            <PlusCircleOutlined />
                          )
                        }
                      />
                    );
                  }}
                </FormControlRender>
              </Form.Item>
            </>
          );
        }}
      >
        {(field) => {
          return (
            <>
              <Form.Item
                noStyle
                name={[field.name, "name"]}
                rules={[
                  { required: true },
                  {
                    validator(rule, value) {
                      if (value?.length < 2) {
                        return Promise.reject("长度不应小于2");
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </>
          );
        }}
      </RuleTree>
    </div>
  );
}

export default App;
